<template>
    <view class="app">
        <load :ready="ready"></load>
		
		<view class="list">
			<view class="item"  @click="link(`./site_info?id=${item.id}`)" v-for="(item, index) in list" :key="item.id">
				<u-image src="/static/icon_site.png" border-radius="16" width="128" height="128"></u-image>
				<view class="info">
					<view class="names">
						<text class="na">{{item.name}}</text>
						<u-tag v-if="item.type == 1" size="mini" type="success" text="充装站" mode="light" />
						<u-tag v-if="item.type == 2" size="mini" text="供应站" mode="light" />
					</view>
					<view class="num">
						<text>实瓶数量：{{item.shi}}</text>
						<text>空瓶数量：{{item.kong}}</text>
					</view>
					<view class="tel">
						<u-icon name="phone" color="#0093dd"></u-icon>
						<text>{{item.head_mobile}}</text>
					</view>
					<view class="text">{{item.address}}</view>
				</view>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		
		<!-- <list-tip :notData="listTip.notData" :isPage="listTip.isPage" :isLoading="listTip.isLoading">
		    <u-empty slot="notdata" text="暂无数据"  margin-top="100"></u-empty>
		</list-tip> -->
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
            // ready: true,
			current: 0,
			btnStyle:{
				background: '#497CD0',
				borderRadius: '16px',
				padding:'0 15px',
			},
			list:[],
			listTip: {},
			orderSn:'',
			info:{},
        };
    },
    onLoad() {
    },
    onReady() {
    },
   onShow() {
   	this.$list.init(this);
	this.listTip.size = 20;
   	this.getList();
   },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
    	this.$list.onReachBottom(this)
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async getList() {
		    let listTip = this.listTip;
		    let res = {};
		    let params = {
		        pageNum: listTip.p,
		        pageSize: listTip.size,
		    };
		    try {
		        res = await this.$api.site(params);
		    } catch (e) {
		        uni.hideLoading();
		        console.log('err', e);
		    }
		    if (res.data.code == this.$config.RESOK) {
		       let list = res.data.data || [];
		       this.list = list;
		    } 
		},
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: $uni-bg-color-grey;
}
.list{
	padding: 0 30rpx;
	.item{
		border-bottom: 1px solid #ddd;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&:nth-last-child(1){
			border: 0;
		}
		
	}
	.info{
		flex: 1;
		padding: 0 20rpx;
	}
	.tel{
		font-size: 13px;
		display: flex;
		align-items: center;
		margin-bottom: 2px;
		color: $color;
	}
	.name{
		font-size: 15px;
		margin-bottom: 4px;
		color: #333;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.na{
		margin-right: 5px;
	}
	.text{
		font-size: 13px;
		color: #666;
	}
	.num{
		font-size: 13px;
		padding: 2px 0;
		text{
			margin-right: 10px;
		}
	}
}
</style>
